<template>
  <div>
    <div class="search-title">查询条件</div>
    <div class="search-box">
      <a-form-model :model="searchForm" layout="inline" ref="searchForm" class="searchForm">
        <a-form-model-item label="答题人" prop="userId">
          <a-input v-model="searchForm.quizUserName" :allowClear=true placeholder="请输入答题人姓名"/>
        </a-form-model-item>
        <a-form-model-item class="searchButton">
          <a-button type="primary" @click="getSearch">查询</a-button>
          <a-button type="default" @click="restSearch('searchForm')">重置</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
    <div class="table-operation">
      <a-button type="primary" @click="exportData" icon="export" v-if="QX.export">导出</a-button>
    </div>
    <a-table
      :columns="columns"
      :data-source="dataList"
      :pagination="false"
      :loading="loading"
      rowKey="quizId"
      :scroll="{x:1500,y: this.$getViewportSize().height-300 }">
      <template
        v-for="col in columns"
        :slot="col.key"
        slot-scope="text,record"
      >
        <span v-else-if="col.key=='isCorrect'">
          <a-tag :color="text? 'green' : 'red'">
            {{ text? '正确' : '错误' }}
          </a-tag>
        </span>
        <span v-else-if="col.key=='userAnswer'">
          <template v-if="record.topicTypeName === '判断题'">
            {{ text === '1' ? '正确' : '错误' }}
          </template>
          <template v-else>
            <TableTootip :content="text"></TableTootip>
          </template>
        </span>
        <span v-else>
          <TableTootip :content="text"></TableTootip>
        </span>
      </template>
    </a-table>
    <a-pagination
      show-size-changer
      :total="totalPage"
      :current="pageIndex"
      :pageSize="pageSize"
      @showSizeChange="onShowSizeChange"
      @change="onChangePage"
      style="float: right;margin-top: 15px"
    />


  </div>
</template>

<script>
import {req} from '../../api/axiosFun'
import preventBack from 'vue-prevent-browser-back';
import TableTootip from '../../components/TableTootip.vue'
export default {
  name: "PkRecord",
  mixins: [preventBack],
  components:{
    TableTootip
  },
  data() {
    return {
      QX:{},
      title: 'pk 记录详情',
      searchForm: {
        quizId: '',
        quizUserName: '',
        topicId: ''
      },
      visible: false,
      detail: {},
      dataList: [],
      columns,
      loading: false,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
    }
  },
  filters: {
    formatDateTime(value) {
      if (!value) return '';
      return moment(value).format('YYYY-MM-DD HH:mm:ss');
    }
  },
  mounted() {
    this.getQuizRecordList();
  },
  methods: {
    //查询
    getSearch() {
      this.pageIndex = 1
      this.getQuizRecordList()
    },
    /* 重置查询 */
    restSearch(form) {
      this.$refs[form].resetFields();
      this.pageIndex = 1
      this.getQuizRecordList();
    },
    /* 查看详情 */
    viewDetail(record) {
      this.loading = true
      req("post", '/quizRecord/getBQuizRecord', {
        quizId: record.quizId
      }).then(res => {
        this.loading = false
        if (res.result === 'success') {
          this.detail = res.data;
          this.visible = true;
        }
      });
    },

    /* 改变页数事件 */
    onChangePage(page, pageSize) {
      this.pageIndex = page;
      this.getQuizRecordList();
    },
    /* 改变每页显示条数 */
    onShowSizeChange(current, pageSize) {
      this.pageIndex = 1;
      this.pageSize = pageSize;
      this.getPkRecordList();
    },
    /* pk 记录列表 */
    getPkRecordList() {
      this.loading = true;
      this.searchForm.page = this.pageIndex;
      this.searchForm.rows = this.pageSize;
      req("post", `/pkRecord/list`, this.searchForm)
        .then(res => {
          if (res.result === 'success') {
            this.dataList = res.data;
            this.totalPage = res.page.totalResult;
            this.QX = res.QX;
          }
          this.loading = false;
        }).catch(e => {
          this.loading = false;
        });
    },
  }
}
const columns = [
  {
    title: '序号',
    align: 'center',
    width: '40px',
    customRender: (text, record, index) => `${index + 1}`,
  },
  {
    title: 'pk 人员 1',
    align: 'center',
    dataIndex: 'player1',
    key: 'player1',
    width: 100,
    scopedSlots: { customRender: 'player1' }
  },

  {
    title: '用户答案',
    align: 'center',
    dataIndex: 'player2',
    key: 'player2',
    width: 100,
    scopedSlots: { customRender: 'player2' }
  },

  {
    title: '创建时间',
    dataIndex: 'createDatetime',
    align:'center',
    key: 'createDatetime',
    scopedSlots: { customRender: 'createDatetime' },
    width: 140
  },
  {
    align: 'center',
    title: '操作',
    width: 100,
    fixed: 'right',
    dataIndex: 'action',
    key: 'action',
    scopedSlots: {customRender: 'action'},
  },
];
</script>

<style scoped>
@import "../../assets/css/maincss.css";
</style>
